<template>
  <div class="container">
    <div class="is-size-4 ml-3 my-4 has-text-weight-bold">
      考试列表
      <div class="primary-color is-size-4">——</div>
    </div>

    <el-table border stripe :data="examListData" style="width: 95%">
      <el-table-column prop="id" label="编号" width="90" />
      <el-table-column prop="title" label="名称" width="280" />
      <el-table-column prop="create_user_name" label="发布者" width="80" />
      <el-table-column
        prop="early_start_time"
        :formatter="dateFormat"
        label="最早开始时间"
        width="150"
      />
      <el-table-column
        prop="late_start_time"
        :formatter="dateFormat"
        label="最晚开始时间"
        width="150"
      />
      <el-table-column
        prop="end_time"
        :formatter="dateFormat"
        label="结束时间"
        width="150"
      />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="danger"
            round
            plain
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="is-size-4 ml-3 mb-4 mt-6 has-text-weight-bold">
      练习列表
      <div class="primary-color is-size-4">——</div>
    </div>

    <el-table border stripe :data="exerciseListData" style="width: 95%">
      <el-table-column prop="id" label="编号" width="90" />
      <el-table-column prop="title" label="名称" width="280" />
      <el-table-column prop="create_user_name" label="发布者" width="80" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="danger"
            round
            plain
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// const commonApi = require('@/api/common')
const examApi = require('@/api/exam')
const dayjs = require('dayjs')
export default {
  data() {
    return {
      examListData: [],
      exerciseListData: []
    }
  },
  computed: {},
  mounted() {
    this.fetchData()
  },
  methods: {
    dateFormat(row, column, cellValue, index) {
      console.log(cellValue)
      if (cellValue) {
        return dayjs(cellValue).format('YYYY-MM-DD HH:mm')
      } else {
        return '-'
      }
    },

    fetchData() {
      let remain = 2
      examApi.getExamList().then(res => {
        this.examListData = res.data
        remain--
        if (remain === 0) this.$loading().close()
      })
      examApi.getExerciseList().then(res => {
        this.exerciseListData = res.data
        remain--
        if (remain === 0) this.$loading().close()
      })
    },

    handleDelete(rowData) {
      this.$confirm('删除该项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('delete exam id: ', rowData.id)
        examApi.deleteExam(rowData.id).then(res => {
          this.$message({
            type: 'success',
            message: res.msg
          })
          this.fetchData()
        })
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  margin-bottom: 100px;
}

.btn {
  font-size: 17px;
  margin-bottom: 15px;
  width: 100%;
  height: 65px;
  text-align: left;
}
</style>
